<!--系统配置  -->
<template>
  <div class="container">
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="LOGO" prop="name" style="margin-bottom: 0;">
          <el-upload class="avatar-uploader" :data="{ path: 'logo' }" :action="uploadURL + 'sys/image/uploadImage'"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.logoUrl" :src="uploadURL + PathPrefix + ruleForm.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span class="beCareful_text bottom20">*请上传小于1MB并且是PNG格式的图片</span>
        </el-form-item>
        <el-form-item label="系统名称" prop="sysName" class="labelWidth">
          <el-input v-model="ruleForm.sysName" placeholder="请输入系统名称·"></el-input>
        </el-form-item>
        <el-form-item label="单位名称" prop="unitName" class="labelWidth">
          <el-input v-model="ruleForm.unitName" placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="版权信息" prop="copyright" class="labelWidth">
          <el-input v-model="ruleForm.copyright" placeholder="请输入版权信息"></el-input>
        </el-form-item>
        <!-- <el-form-item label="标签管理方式">
          <el-radio-group v-model="ruleForm.labelManageType">
            <el-radio border :label="3">盒标签管理</el-radio>
            <el-radio border :label="6">档案标签管理</el-radio>
            <el-radio border :label="9">盒与档案标签管理</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-row>
          <el-col :span="4">
            <el-form-item label="容量统计">
              <el-switch v-model="ruleForm.capacityStatisticsFlag" active-color="#13ce66" :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="ruleForm.capacityStatisticsFlag == 1">
            <el-form-item label="每厘米档案页数" prop="cmPageNo">
              <el-input v-model.number="ruleForm.cmPageNo" placeholder="请输入每厘米档案页数"></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="4">-->
          <!--            <el-form-item label="进出人数统计">-->
          <!--              <el-switch-->
          <!--                v-model="ruleForm.peopleNoFlag"-->
          <!--                active-color="#13ce66"-->
          <!--               -->
          <!--                :active-value="1"-->
          <!--                :inactive-value="0"-->
          <!--              >-->
          <!--              </el-switch> </el-form-item-->
          <!--          ></el-col>-->
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import rule from '@/utils/rule'
import { settingEdit, settinglist } from '@/api/request'
export default {
  name: 'systemConfig',
  data() {
    return {
      PathPrefix: 'logo/',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      list: [], //系统配置的列表
      ruleForm: {},
      rules: {
        cmPageNo: [{ validator: rule.zzs, trigger: 'blur', required: true }],
        sysName: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    this.getSettingList()
  },
  computed: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 创建ruleForm的深拷贝，防止后续修改影响到已提交的数据
          const formDataForSubmit = JSON.parse(JSON.stringify(this.ruleForm))
          settingEdit(this.ruleForm)
            .then((res) => {
              if (res.data.code == 200) {
                this.$store.dispatch('getSettingFields', formDataForSubmit)
                if (this.ruleForm.capacityStatisticsFlag == 1) {
                  localStorage.setItem('cmPageNo', this.ruleForm.cmPageNo)
                } else {
                  localStorage.removeItem('cmPageNo')
                }
                this.$message({
                  message: res.data.message,
                  type: 'success',
                })
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'error',
                })
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
            .finally(() => { })
        } else {
          return false
        }
      })
    },
    // 获取系统配置列表
    getSettingList() {
      settinglist().then((res) => {
        if (res.data.code == 200) {
          this.ruleForm = res.data.data[0]
          localStorage.setItem('cmPageNo', res.data.data[0].cmPageNo)
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.ruleForm.logoUrl = res.data
      this.submitForm('ruleForm')
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isPNG) {
        this.$message.error('上传LOGO图片只能是 PNG 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传LOGO图片大小不能超过 1MB!')
      }
      return isPNG && isLt1M
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleRemove(file) { },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible = true
    // },
    handleDownload(file) { },
  },
}
</script>
<style lang="less" scoped>
.container {
  // max-height: 78vh;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.el-card {
  margin: 0;
  height: 98%;
}

.el-card__body {
  padding: 0 10px;
  height: 100%;

  .el-form {
    margin-top: 10px;

    .el-form-item {
      margin-bottom: 22px;
    }
  }
}

.labelWidth {
  width: 40%;
}

.avatar-uploader {
  line-height: 10px;

  .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}
</style>
